<template>
    <el-card class="area-post-box-card" shadow="hover">
        <div slot="header" class="clearfix">
            <el-popover
                placement="right"
                width="240"
                trigger="hover">
                <area-card :area="areaPost.area"></area-card>
                <a slot="reference" @click="goToAreaPost">{{areaPost.area.name}}</a>
            </el-popover>
        </div>
        <div v-if="areaPost.posts.length!==0">
            <div v-for="post in areaPost.posts" :key="post.id">
                <post-item :post="post"
                           :link="link"
                           @changeLabelAttention="changeLabelAttention"></post-item>
            </div>
        </div>
        <div v-else>
            该区域暂时没有帖子哦
        </div>
    </el-card>
</template>

<script>
    import AreaCard from '@/components/area/AreaCard'
    import PostItem from '@/components/post/PostItem'

    export default {
        name: 'recommendPostCard',
        components: {
            AreaCard,
            PostItem
        },
        props: {
            areaPost: {
                type: Object,
                required: true
            },
            link: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        methods: {
            goToAreaPost () {
                this.$router.push(`/area/${this.area.name}`)
            },
            changeLabelAttention (data) {
                if (this.link) {
                    this.$emit('changeLabelAttention', data)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .area-post-box-card {
        margin: 32px auto;
        background: linear-gradient(rgba(226, 129, 255, 0.6), rgba(112, 120, 255, 0.6), rgba(70, 198, 255, 0.6), rgba(255, 255, 255, 0.6));

        a {
            float: left;
            font-weight: bolder;
            font-size: 32px;

            margin-left: 32px;
            text-decoration: none;
            cursor: pointer;
        }

        a:link {
            color: #216278;
        }

        a:visited {
            color: #216278;
        }

        a:hover {
            color: rgba(255, 151, 60, 0.8);
        }

        a:active {
            color: rgba(255, 86, 25, 0.8);
        }
    }
</style>
